<template>
  <q-page>
    <div class="container">
      <div class="row q-col-gutter-md">
        <div class="col-12" v-if="member">
          <div class="row q-gutter-sm items-end">
            <q-btn round icon="mdi-arrow-left" @click="$router.go(-1)"/>
            <div class="text-h6 text-bold">{{ member.nickname }}</div>
            <div class="text-grey">@{{ member.username }}</div>
          </div>
        </div>
        <div class="col-12">
          <q-btn no-caps class="full-width" color="orange" label="导出成员box数据" @click="exportData"/>
        </div>
        <div class="col-12" v-if="this.fullList && this.box">
          <character-list v-model="showBox">
            <template #avatar="data">
              <q-popup-proxy @before-show="loadCharacterInfo(data.item.id)">
                <div class="q-pa-md" style="width: 300px; background: white" v-if="characterInfo">
                  <div class="row q-col-gutter-md">
                    <div class="col-auto">
                      <div class="row">
                        <character-component :avatar="data.item.avatar"
                                             :name="data.item.name"
                                             :star="data.item.star"
                                             :rank="data.item.rank"
                                             style="width: 96px"/>
                      </div>
                      <div class="row">
                        专武：<div class="text-bold">{{ data.item.weapon || 0 }}</div>级
                      </div>
                    </div>
                    <div class="col">
                      <div class="row q-col-gutter-md">
                        <div v-for="(item, key) in characterInfo.rank[data.item.rank - 1].equipmentList"
                             :key="key"
                             class="col-6">
                          <div style="width: 72px; height: 72px; margin: 0 auto">
                            <div class="relative-position">
                              <q-img class="absolute-top" :src="item.icon"
                                     :ratio="1"
                                     width="72px"/>
                              <q-img class="absolute-top" src="img/character/add.png"
                                     width="72px"
                                     v-show="!(data.item.equipment && data.item.equipment[key])"/>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </q-popup-proxy>
            </template>
          </character-list>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
import CharacterList from "components/CharacterList";
import Guild from "src/lib/api/guild";
import Character from "src/lib/api/characterInfo";
import {copyToClipboard} from "quasar";
import CharacterComponent from "components/Character";
import BigFun from "src/lib/api/bigfun";

export default {
  name: "Box",
  components: {CharacterComponent, CharacterList},
  data: function () {
    return {
      member: null,
      fullList: null,
      box: null,
      characterInfo: null
    }
  },
  computed: {
    showBox: {
      get() {
        let box = this.box;
        let list = [];
        for (const i of box) {
          const c = this.getCharacterById(i.id);
          if (this.fullList && c) list.push({
            star: i.star,
            rank: i.rank,
            equipment: i.equipment,
            weapon: i.weapon,
            ...c
          });
        }
        return list;
      }
    }
  },
  methods: {
    async loadCharacterInfo(id) {
      this.$q.loading.show();
      const i = await BigFun.getCharacterInfo(id);
      if (i.length > 0) this.characterInfo = i[0];
      this.characterInfo.name = this.getCharacterById(id).name;
      console.log(this.characterInfo);
      this.$q.loading.hide();
    },
    getCharacterById(id) {
      for (const i of this.fullList) {
        if (id === i.id) return i;
      }
      return null;
    },
    exportData() {
      try {
        const base64 = btoa(encodeURI(JSON.stringify({
          name: this.member.nickname,
          box: this.box
        })));
        copyToClipboard(base64).then(() => {
            this.$q.notify({
              message: '成功',
              caption: '已成功将角色信息复制到剪切板。',
              icon: 'check'
            });
          }
        ).catch(() => {
          this.$q.notify({
            message: '失败',
            caption: '复制角色信息到剪切板失败。',
            icon: 'clear'
          });
          this.$q.dialog({
            title: '手动复制',
            message: '请手动复制下方框内的文本：',
            prompt: {
              model: base64,
              type: 'text'
            }
          });
        })
      } catch (e) {
        this.$q.notify({
          message: '失败',
          caption: '生成角色信息编码失败。',
          icon: 'clear'
        });
      }
    }
  },
  async mounted() {
    this.$q.loading.show();
    try {
      this.member = await Guild.memberInfo(this.$route.params.member);
      this.fullList = await Character.getCharacterList();
      this.box = await Guild.memberBox(this.$route.params.member);
    } catch {
      await this.$router.push('/guild');
    }
    this.$q.loading.hide();
  }
}
</script>

<style scoped>

</style>
